<template>
	<view class="full-height animate__fadeIn dh-0-6s">
		<!-- 加载中蒙版 -->
		<uni-transition mode-class="fade" :duration="500" :show="!dataLoaded" custom-class="vague-bg-9 mask-load">
		</uni-transition>
		<!-- 用户信息弹窗 -->
		<wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal>
		<!-- 用户信息 -->
		<view class="w-100 pos-rela z-index-1">
			<!-- 顶部背景图 -->
			<image class="bg-img" :src="userInfo.homepage" mode="aspectFill">
			</image>
			<view class="pos-abso w-100 overflow-hidden">
				<!-- #ifdef MP-WEIXIN -->
				<view class="h-100 w-100" :style="{paddingTop:menuObject.height + menuObject.top +30 + 'px'}">
				<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="h-100 w-100" style="padding-top: 150rpx;">
					<!-- #endif -->
						<view class=" flex-dir-col h-100 flex-x-bet w-100 ping-30">
							<view @click="$NavigateTo('/pages/user/myPage')"
								class="w-100 flex-dir-col ali-item-cen text-border">
								<view class="user-info-avatar ping-10 br-200 bac-col-f">
									<image mode="aspectFill" :src="(userInfo.avatar_file && userInfo.avatar_file.url)
										      ? userInfo.avatar_file.url 
										      : 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'" />
								</view>
								<view class="fs-30 fw-600 mt-10 col-0 text-element-1">{{userInfo.nickname || '未设置'}}
								</view>
								<view class="fs-26 mt-5 col-0 text-element-1">{{userInfo.signature || ''}}️</view>
							</view>
							<view class="flex-dir-row flex-x-spa ali-item-cen col-0 w-100 text-border">
								<view class="ali-item-cen flex-dir-col">
									<view class="fs-36 fw-600">{{activityCount}}</view>
									<view class="fs-24 col-0-6d">发布活动</view>
								</view>
								<view class="ali-item-cen flex-dir-col">
									<view class="fs-36 fw-600">{{circleLikeCount}}</view>
									<view class="fs-24 col-0-6d">圈子获赞</view>
								</view>
								<view class="ali-item-cen flex-dir-col">
									<view class="fs-36 fw-600">{{circleCount}}</view>
									<view class="fs-24 col-0-6d">发布圈子</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pos-abso w-100 bottom-index top-690">
					<view class="flex-dir-row flex-x-bet w-100 ping-0-20">
						<view class="flex-dir-col ali-item-cen active-bg"
							@click="$NavigateTo('/pages/user/eventManagement')">
							<image class="activity-image"
								src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/hdgl.png"
								mode="scaleToFill" />
							<view class="fs-30 fw-600 col-0">活动管理</view>
						</view>
						<view class="flex-dir-col ali-item-cen active-bg"
							@click="$NavigateTo('/pages/user/lnformationManagement')">
							<image class="activity-image"
								src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/qzgl.png"
								mode="scaleToFill" />
							<view class="fs-30 fw-600 col-0">圈子管理</view>
						</view>
					</view>
					<view class="ping-0-20 w-100 pb-30">
						<view class="br-20 w-100 mt-30 bac-col-f ping-30"
							@click="$NavigateTo('/pages/user/myActivities')">
							<view class="flex-dir-row flex-x-bet ali-item-cen w-100">
								<view class="fs-26 fw-600 col-0">参加的活动</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
							<view class="flex-dir-row ali-item-cen w-100 mt-30">
								<view class="fs-22 col-00ba31 text-ali-c start-con mr-20">
									进行中 {{signUpData.ongoing}}</view>
								<view class="fs-22 col-00ba31 text-ali-c start-con">
									已结束 {{signUpData.ended}}</view>
							</view>
						</view>
						<view class="w-100 mt-30 bac-col-f ping-30 br-20 mb-20">
							<view @click="$NavigateTo('/pages/user/userPersonal')"
								class="flex-dir-row flex-x-bet ali-item-cen pb-30">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-gerenxinxi fs-50 col-0"></view>
									<view class="fs-26 col-0 ml-10">个人资料</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
							<view v-if="!versionAuditStatus" @click="$NavigateTo('/pages/user/myWallet')"
								class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-qianbao2-F fs-50 col-0"></view>
									<view class="fs-26 col-0 ml-10">我的钱包</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
							<view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
								@click="$NavigateTo('/pages/user/authentication')">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-renzhengyirenzheng fs-50 col-0"></view>
									<view class="fs-26 col-0 ml-10">组织认证</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
							<view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
								@click="$NavigateTo('/pages/user/problem')">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-changjianwenti2 fs-48 col-0"></view>
									<view class="fs-26 col-0 ml-10">常见问题</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
							<!-- <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
								@click="$Toast('暂不支持')">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-renzhengyirenzheng fs-50 col-0"></view>
									<view class="fs-26 col-0 ml-10">组织认证</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view> -->
							<!-- #ifdef MP-WEIXIN -->
							<button style="height: auto;line-height: 0;" class="bac-col-f ping-30-0 bor-top-f3"
								open-type="contact">
								<view class="flex-dir-row flex-x-bet  ali-item-cen ping-30-0 ">
									<view class="flex-dir-row ali-item-cen">
										<view class="iconfont ic-kefu1 fs-50 col-0"></view>
										<view class="fs-26 col-0 ml-10">联系客服</view>
									</view>
									<view class="iconfont ic-you fs-36 col-0"></view>
								</view>
							</button>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<view @click="$Toast('H5暂不开放联系客服')"
								class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 ">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-kefu1 fs-50 col-0"></view>
									<view class="fs-26 col-0 ml-10">联系客服</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
							<!-- #endif -->
							<view v-if="!userInfo._id || tokenExpired < Date.now()"
								@click="$NavigateTo('/qmy_user/login')"
								class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen pt-30 ">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-guanbituichu fs-50 col-0"></view>
									<view class="fs-26 col-0 ml-10">去登录</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
							<view v-else @click="logout" class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen pt-30 ">
								<view class="flex-dir-row ali-item-cen">
									<view class="iconfont ic-guanbituichu fs-50 col-0"></view>
									<view class="fs-26 col-0 ml-10">退出登录</view>
								</view>
								<view class="iconfont ic-you fs-36 col-0"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
	export default {
		name: 'pageE',
		props: {
			isVisible: {
				type: Boolean,
				required: false
			},
			refresh: {
				type: Boolean,
				required: false
			}
		},
		components: {
			WxUserInfoModal
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				// 我的活动数量
				activityCount: 0,
				// 我的圈子点赞数
				circleLikeCount: 0,
				// 我的圈子数
				circleCount: 0,
				// 我的报名数据
				signUpData: {
					ended: 0,
					ongoing: 0
				},
				dataLoaded: false,
				tokenExpired: null, //token过期时间
				showAuthorizationModal: false,
				versionAuditStatus: true, // 版本状态
			}
		},
		computed: {
			userInfo() {
				this.tokenExpired = uniCloud.getCurrentUserInfo().tokenExpired;
				return store.userInfo //用户信息
			},
		},
		watch: {
			isVisible(val) {
				if (val && !this.dataLoaded) {
					// 查询版本
					this.getVersionAuditStatus();
					// 获取我的活动数量
					this.getMyActivityCount();
					// 获取我的圈子点赞数
					this.getMyCircleLikeCount();
					// 获取我的圈子数
					this.getMyCircleCount();
					// 获取我的报名数据
					this.getMySignUpCount();
				}
				if (this.userInfo._id && this.tokenExpired > Date.now() && (!this.userInfo.avatar_file || !this.userInfo
						.nickname || this.userInfo
						.nickname ==
						"")) {
					this.showAuthorizationModal = true
				}
			},
			refresh(e) {
				if (e) {
					this.dataLoaded = false;
					this.getMyActivityCount();
					this.getMyCircleLikeCount();
					this.getMyCircleCount();
					this.getMySignUpCount();
				}
			}
		},
		methods: {
			// 查询版本
			getVersionAuditStatus() {
				this.$Route('get-public-data').getVersionAuditStatus().then((res) => {
					this.versionAuditStatus = res.data[0].status;
				})
			},
			// 获取到的用户信息
			async updatedUserInfoEvent(info) {
				let avatarUrl = info.avatar;
				let avatar_file = {
					extname: avatarUrl.split('.')[avatarUrl.split('.').length - 1],
					name: '',
					url: ''
				}
				//上传到服务器
				let cloudPath = this.userInfo._id + '' + Date.now()
				avatar_file.name = cloudPath
				try {
					uni.showLoading({
						title: "更新中",
						mask: true
					});
					let {
						fileID
					} = await uniCloud.uploadFile({
						filePath: avatarUrl,
						cloudPath,
						fileType: "image"
					});
					avatar_file.url = fileID
					uni.hideLoading()
				} catch (e) {
					console.error(e);
				}
				mutations.updateUserInfo({
					nickname: info.nickname,
					avatar_file: avatar_file
				})
				this.showAuthorizationModal = false
			},
			async bindchooseavatar(res) {
				let avatarUrl = res.detail.avatarUrl
				console.log(avatarUrl)
				let avatar_file = {
					extname: avatarUrl.split('.')[avatarUrl.split('.').length - 1],
					name: '',
					url: ''
				}
				//上传到服务器
				let cloudPath = this.userInfo._id + '' + Date.now()
				avatar_file.name = cloudPath
				try {
					uni.showLoading({
						title: "更新中",
						mask: true
					});
					let {
						fileID
					} = await uniCloud.uploadFile({
						filePath: avatarUrl,
						cloudPath,
						fileType: "image"
					});
					avatar_file.url = fileID
					uni.hideLoading()
				} catch (e) {
					console.error(e);
				}
				console.log('avatar_file', avatar_file);
				this.setAvatarFile(avatar_file)
			},
			logout() {
				mutations.logout()
			},
			// 获取我的活动数量
			getMyActivityCount() {
				this.$Route('get-private-data').getMyActivityCount().then((res) => {
					this.activityCount = res.data;
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
				}).catch((err) => {
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取我的圈子点赞数
			getMyCircleLikeCount() {
				this.$Route('get-private-data', true).getMyCircleLikeCount().then((res) => {
					this.circleLikeCount = res.data;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取我的圈子数
			getMyCircleCount() {
				this.$Route('get-private-data', true).getMyCircleCount().then((res) => {
					this.circleCount = res.data;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取我的报名数据
			getMySignUpCount() {
				this.$Route('get-private-data', true).getMySignUpCount().then((res) => {
					this.signUpData = res.data;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			}
		}
	}
</script>

<style lang="scss">
	.bg-img {
		position: absolute;
		width: 100%;
		opacity: 1;
		height: 640rpx;
		top: 0;
		left: 0;
		z-index: -1;
		background: linear-gradient(-169deg, #1fea4140 5%, #ffffff);
		clip-path: ellipse(190% 100% at 50% 0%);
	}

	.user-info-avatar {
		width: 160rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.active-bg {
		background: #ffffff;
		width: 48.5%;
		height: 200rpx;
		border-radius: 60rpx;
	}


	.start-con {
		width: 120rpx;
		height: 45rpx;
		border-radius: 200rpx;
		background: #00ba3215;
		font-weight: normal;
		line-height: 45rpx;
	}

	.full-height {
		min-height: 100vh;
	}

	.z-index-1 {
		z-index: 1;
	}

	.overflow-hidden {
		top: 0;
		left: 0;
		height: 640rpx;
		overflow: hidden;
	}

	.top-690 {
		top: 680rpx;
	}

	.activity-image {
		width: 180rpx;
		height: 180rpx;
		margin-top: -30rpx;
	}
</style>